<template>
  <div class="Msg-wrap">
    <el-card class="msg-card">
      <div slot="header" class="clearfix flex msg-info-top">
        <span>消息筛选</span>
        <div>
          <el-radio v-model="radio1" @change="changeRadio1()" label="0" border
            >全部消息</el-radio
          >
          <el-radio v-model="radio1" @change="changeRadio1()" label="1" border
            >系统消息</el-radio
          >
          <el-radio v-model="radio1" @change="changeRadio1()" label="2" border
            >个人消息</el-radio
          >
        </div>
      </div>
      <div class="msg-body">
        <Table :tableData="msgList" :curPage="currentPage" :curSize="size"></Table>
      </div>
      <div class="page-wrap">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="currentPage"
          :total="+total"
          :page-size="size"
          @current-change="changeCurPage"
        >
        </el-pagination>
      </div>
    </el-card>
    <MsgDetail :info="$store.state.msg.info"></MsgDetail>
  </div>
</template>

<script>
import { getMessage } from "@/http/api.js";
import Table from "./Table";
import MsgDetail from "./MsgDetail";
export default {
  data() {
    return {
      currentPage: 1,
      size: 10,
      radio1: "0",
      msgList: [],
      total: "",
      
    };
  },
  components: { Table, MsgDetail },
  created() {
    this.getMessage();
  },
  mounted() {},
  methods: {
    // 获取消息
    async getMessage() {
      let params = {
        current: this.currentPage,
        size: this.size,
        type: this.radio1,
      };
      let res = await getMessage(params);
      if (res.errCode != 0) return;
      this.total = res.data.total;
      this.msgList = res.data.records;
    },
    // 消息筛选
    changeRadio1() {
      this.getMessage();
    },
    // 改变当前页
    changeCurPage(val) {
      this.currentPage = +val;
      this.getMessage();
    },
  },
};
</script>
 
<style lang="less" scoped>
.Msg-wrap {
  height: 100%;
  .msg-info-top {
    align-items: center;
    justify-content: space-between;
    span {
      font-weight: bold;
    }
  }
  .page-wrap {
    padding: 15px 0;
  }
}
</style>